<template>
	<view class="container">

		<view class="view-banner">
			<view class="yui-top-arrow" @click="back()">

				<tui-icon name="arrowleft" :size="30" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>

			</view>
			<view class="yui-top-fixed">
				产品拼抢（创客宝专区）
			</view>
		</view>

		<view class="tui-product-box">
			<view class="tui-product-box-block" v-if="tangrenList.length>0">
				<view class="tui-group-name1">
					<view class="tui-group-name-title">
						产品拼抢区
					</view>
					<view class="tui-group-name-mystore" @tap="more(28)">
						<view>更多 <tui-icon name="arrowright" :size="14" ></tui-icon>
						</view>
					</view>
				</view>
				<view class="tui-product-list">
					<view class="tui-product-container">
						<block v-for="(item, index) in tangrenList" :key="index" v-if="(index + 1) % 2 != 0">
							<!--商品列表-->
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150"
								@tap="detail(item.goods_id)">
								<image :src="item.pic_cover_mid" class="tui-pro-img" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{ item.goods_name }}</view>
									<view>
										<view class="tui-pro-price mb20">
											<view class="yui-price-normals">
												<view class="yui-pricebox">￥</view>
												<view class="yui-normal-price">{{item.promotion_price[0] }}
												</view>
											</view>
											   
											<view class="tui-factory-price">原价:￥{{ item.market_price }}</view>
										</view>
										
										<view class="yui-ptbutton ">
											<text class="yui-ptbutton-text">立即认购</text>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<view class="tui-product-container">
						<block v-for="(item, index) in tangrenList" :key="index" v-if="(index + 1) % 2 == 0">
							<!--商品列表-->
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150"
								@tap="details(item.goods_id)">
								<image :src="item.pic_cover_mid" class="tui-pro-img" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{ item.goods_name }}</view>
									<view>
										<view class="tui-pro-price mb20">
											<view class="yui-price-normals">
												<view class="yui-pricebox">￥</view>
												<view class="yui-normal-price">{{item.promotion_price[0] }}
												</view>
											</view>
											   
											<view class="tui-factory-price">原价:￥{{ item.market_price }}</view>
										</view>
										<view class="yui-ptbutton">
											<text class="yui-ptbutton-text">立即认购</text>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			
			</view>
		</view>
		
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				opcity: 0,
				tangrenList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
			};
		},
		onShow() {
			this.init();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			more: function(e) {
				console.log(e)
				uni.navigateTo({
					url: "/pages/productList/productList?category_id=" + e
				})
			},
			detail: function(goods_id) {
				uni.navigateTo({
					url: '/pages/productDetail/productDetail?goods_id=' + goods_id + '&type=1'
				});
			},
			details: function(goods_id) {
				uni.navigateTo({
					url: '/pages/productDetail/pingouDetail?goods_id=' + goods_id
				});
			},
			init() {
				let token = this.tui.getToken();
				let pgdatas = {
					token: token,
					category_id: 28,
					order_type: 1,
					sort: 'asc',
					page: 1,
					limit: 2,
				};
				let pingou = this.tui.request('goods', 'post', pgdatas, 1000, 1, '', 'goodsList');
				Promise.resolve(pingou).then((value) => {
					if (value.code == 10000) {
						this.tangrenList = value.data.data;
				        if(this.tangrenList){
							this.tangrenList.forEach((item, index) => {
								this.value = [index, 0, 0];
								this.tangrenList[index].promotion_price = this.tangrenList[index]
									.promotion_price.split(".");
							
							})
						}
					} else {
						this.tui.toast(value.message);
					}
				})
			},
			onReachBottom: function() {
				// if (!this.pullUpOn) return;
				this.loadding = true;
				if (this.pageIndex == 4) {
					this.loadding = false;
					this.pullUpOn = false;
				} else {
					this.pageIndex = this.pageIndex + 1;
					let token = this.tui.getToken();
					let datas={
						category_id: 28,
						order_type: 1,
						sort: 'asc',
						page: this.pageIndex,
						limit: 2,
					};
					let result=this.tui.request('goods','post',datas,1000,1,'','goodsList');
					Promise.resolve(result).then((value)=>{
					   if(value.code==10000){
						  let newsdata='';
						   if(value.data.data){
						   	value.data.data.forEach((item, index) => {
						   		this.value = [index, 0, 0];
						   		value.data.data[index].promotion_price = value.data.data[index].promotion_price
						   			.split(".");;
						   	})
							 this.tangrenList = this.tangrenList.concat(value.data.data);
						   }
						   
						   this.loadding = false;
					   }else{
					   	this.tui.toast(value.message);
					   }
					   
					   
					})
					
				}
			}
		}
	};
</script>
<style>
	page {
		/* background-color: #eae8e8; */
	}

	.container {
		color: #333;
		background: rgb(245,245,245);
	}
	.view-banner {
		box-sizing: border-box;
		background: #E33E13;
		height: 100rpx;
	}
	.yui-top-arrow {
		position: absolute;
		top: 20rpx;
		width: 100%;
		z-index: 1000;
	}
	.yui-top-fixed {
		position: absolute;
		z-index: 100;
		width: 100%;
		top: 30rpx;
		text-align: center;
		color: #fff;
	}
	
	.tui-product-box {
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.tui-product-box-block {
		height: auto;
		/* background: #eae8e8; */
		padding: 0rpx 0;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		color: #fff;
	}
	.tui-group-name1 {
		position: relative;
		background-size: 100%;
		text-align: center;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		line-height: 88rpx;
		font-size: 26rpx;
		font-weight: bold;
		display: flex;
		margin-bottom: 10rpx;
		color: #333333;
	}
	.tui-group-name-title {
		font-size: 32rpx;
		text-align: left;
		padding-left: 10rpx;
	}
	.tui-group-name-mystore {
		display: flex;
		line-height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 22rpx;
		font-size: 22rpx;
		font-weight: normal;
	}
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 10rpx 0rpx;
	}
	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}
	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		border-radius: 20rpx;
		box-shadow: 3rpx 6rpx 10rpx rgba(0, 0, 0, .04);
		overflow: hidden4
	}
	.tui-pro-img {
		width: 100%;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		display: block;
	}
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		height: 70rpx;
		overflow: hidden;
	}
	.tui-pro-price {
		display: flex;
	    justify-content: space-between;
		color: #e41f19;
		padding-top: 18rpx;
	}
	.mb20{
		margin-bottom: 60rpx;
	}
	.yui-price-normals{
	  justify-content: left;
	  display: flex;
	}
	.yui-pricebox {
		font-size: 22rpx;
		font-weight: bold;
		color: #e41f19;
	}
	.yui-normal-price {
		font-size: 26rpx;
		font-weight: bold;
	}
	.tui-factory-price {
		font-size: 22rpx;
		margin-bottom: 10rpx;
		color: #a0a0a0;
		text-decoration: line-through;
	}
	.yui-ptbutton {
		float: right;
		position: relative;
		width: 84rpx;
		height: 36rpx;
		padding: 10rpx 10rpx;
		background: linear-gradient(to right, #ff6811, #ff1505);
		border-radius: 4px;
		text-align: center;
	}
	.yui-ptbutton-text{
		position: absolute;
		top: 10rpx;
		left: -20rpx;
		display: inline-block;
		font-size: 36rpx;
		transform: scale(0.5);
		font-weight: 400;
		line-height: 36rpx;
		color: #FFFFFF;
		white-space: nowrap;
	}
</style>
